<script>
  import $ from '../dfish.js'
  import {
    h
  } from 'vue'
  import FormBase from './FormBase.vue'
  import PreloadNone from '../preload/PreloadNone.vue'
  import Dialog from './Dialog.vue'

  export default {
    name: 'w-dropbox',
    mixins: [FormBase],
    props: ['multiple', 'cancelable', 'dropWidth'],
    data() {
      return {
        hasBorder: true,
        text: '',
        dropper: null,
        showDrop: false,
        placeholder_type: 'placeholder_select',
      }
    },
    methods: {
      click() {
        if (this.$slots.default) {
          this.showDrop = !this.showDrop
          this.warn(false)
        }
      },
      formText() {
        return this.input_text
      },
      html_input() {
        let t = this.input_text
        let p = this.input_placeholder
        return [
          this.html_input_hidden(),
          h('div', {
            class: 'w-dropbox-text f-line-1',
            title: t || p,
          }, t || (p && h('div', {class: 'w-input-placeholder'}, p))),
          this.showDrop && h(Dialog, {
            context: this,
            ownproperty: true,
            class: 'f-dfish-dialog',
            width: Math.max($.number(this.x.dropWidth), $.bcr(this.el('main')).width),
            scrollY: true,
            scrollView: '.z-on',
            autoHide: true,
            snap: {
              target: () => this.el('main'),
              position: 'v',
              indent: 1
            },
            on: {
              close: () => this.showDrop = false
            }
          }, this.$slots)
        ]
      },
      html_button() {
        return h('button', {
          class: 'w-input-bbr f-i f-i-caret-down',
          disabled: this.x.disabled,
        })
      }
    },
    computed: {
      input_text() {
        let r = []
        let s = this.slots_children()
        let m = $.array(this.x.modelValue)
        $.lodash.each(m, v => {
          let i = s.findIndex(n => n.props.value == v)
          if (i > -1) r.push(i)
          if (!this.x.multiple) return false
        })
        return r.sort().map(v => s[v].props.text).join(', ')
      },
      main_prop() {
        return {
          onclick: this.isNormal && this.click
        }
      }
    }
  }
</script>
